import 'dart:async';
import 'package:flutter/material.dart';


class NowLoadingView extends StatefulWidget {
  @override
  State<NowLoadingView> createState() => _NowLoadingViewState();
}

class _NowLoadingViewState extends State<NowLoadingView> {
  String text = 'M a t c h i n g ...';
  @override
  Widget build(BuildContext context) {
    return Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: text.split("").asMap().entries.map((entry) {
              final index = entry.key;
              final char = entry.value;
              return TextAnimationView(text: char, periodic: index);
            }).toList());
  }
}

class TextAnimationView extends StatefulWidget {
  final String text;
  final int periodic;

  const TextAnimationView(
      {Key? key, required this.text, required this.periodic});

  @override
  _TextAnimationViewState createState() => _TextAnimationViewState();
}

class _TextAnimationViewState extends State<TextAnimationView>
    with TickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _scaleIn, _scaleOut, _fadeIn, _fadeOut;
  double _blurRadius = 0.0;

  @override
  void initState() {
    super.initState();

    _animationController = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 300));
    _scaleIn = Tween<double>(begin: 1, end: 0.5)
        .chain(CurveTween(curve: Curves.easeIn))
        .animate(_animationController);
    _scaleOut = Tween<double>(begin: 0.5, end: 1.2)
        .chain(CurveTween(curve: Curves.easeOut))
        .animate(_animationController)
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          _blurRadius = 6;
          setState(() {});
          Future.delayed(Duration(milliseconds: 50), () {
            if (mounted) {
              _animationController.stop();
              _animationController.reset();
              _blurRadius = 0;
            }
          });
        }
      });
    _fadeIn = Tween<double>(begin: 1, end: 0.0)
        .chain(CurveTween(curve: Curves.easeIn))
        .animate(_animationController);
    _fadeOut = Tween<double>(begin: 0.0, end: 1)
        .chain(CurveTween(curve: Curves.easeOut))
        .animate(_animationController);

    delayedAnimation();
    bingAnimation();
  }

  void bingAnimation() {
    Future.delayed(Duration(milliseconds: 50), () {
      if (mounted) {
        _animationController.stop();
        _animationController.reset();
        _animationController.forward();
      }
    });
  }

  void delayedAnimation() {
    Timer.periodic(Duration(milliseconds: 2000), (_) {
      Future.delayed(Duration(milliseconds: widget.periodic * 50), () {
        if (mounted) {
          _animationController.stop();
          _animationController.reset();
          _animationController.forward();
        }
      });
    });
  }

  @override
  void dispose() {
    if (mounted) {
      _animationController.stop();
    }
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
        animation: _animationController,
        builder: (context, child) {
          return ScaleTransition(
              scale: _scaleIn.value != 0.5 ? _scaleIn : _scaleOut,
              child: Opacity(
                opacity: _fadeIn.value != 0.0 ? _fadeIn.value : _fadeOut.value,
                child: Text(
                  widget.text,
                  strutStyle: StrutStyle(forceStrutHeight: true, height: 1),
                  style: TextStyle(
                    letterSpacing: -0.7,
                    fontSize: 25,
                    color: Colors.white,
                    fontFamily: 'LINESeedSans_A_XBd',
                    shadows: [
                      Shadow(
                        color: Colors.white.withOpacity(0.4),
                        blurRadius: _blurRadius,
                        offset: const Offset(0, 0),
                      ),
                    ],
                  ),
                  textAlign: TextAlign.center,
                ),
              ));
        });
  }
}
